<template>
<div class="dna-compare">
  <div class="form-wrap">
    <el-form :model="formModel" :rules="rules">
      <div class="key-value-infos-table el-form">
        <div class="table-item quarter">
          <strong class="label">案件编号</strong>
          <div class="value">
            <el-form-item prop="caseId" >
              <el-input size="mini"  v-model="formModel.caseId" placeholder="案件编号"></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">身份证号</strong>
          <div class="value">
            <el-form-item  prop="personId" >
              <el-input size="mini" v-model="formModel.personId" placeholder="身份证号"></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">样本编号</strong>
          <div class="value">
            <el-form-item  prop="sampleId" >
              <el-input size="mini" v-model="formModel.sampleId" placeholder="样本编号"></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">比中单位</strong>
          <div class="value">
            <el-form-item  prop="compareUnit" >
              <!-- <el-input size="mini" v-model="formModel.compareUnit" placeholder="选择比中单位"></el-input> -->
              <el-select size="mini" v-model="formModel.compareUnit" placeholder="选择比中单位">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">比中时间</strong>
          <div class="value">
            <el-date-picker 
              size="mini"
              v-model="formModel.compareTime"
              value-format="yyyy-MM-dd hh-mm"
              type="datetimerange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">比中类型</strong>
          <div class="value">
            <el-form-item  prop="compareType" >
              <!-- <el-input size="mini" v-model="formModel.compareType" placeholder="选择比中类型"></el-input> -->
              <el-select size="mini" v-model="formModel.compareType" placeholder="选择比中类型">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">反馈结果</strong>
          <div class="value">
            <el-form-item  prop="feedback" >
              <!-- <el-input size="mini" v-model="formModel.feedback" placeholder="选择反馈结果"></el-input> -->
              <el-select size="mini" v-model="formModel.feedback" placeholder="选择反馈结果">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">签收单位</strong>
          <div class="value">
            <el-form-item  prop="receiveUnit" >
              <!-- <el-input size="mini" v-model="formModel.receiveUnit" placeholder="选择签收单位"></el-input> -->
              <el-select size="mini" v-model="formModel.receiveUnit" placeholder="选择签收单位">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">反馈单位</strong>
          <div class="value">
            <el-form-item  prop="feedbackUnit" >
              <!-- <el-input size="mini" v-model="formModel.feedbackUnit" placeholder="选择反馈单位"></el-input> -->
              <el-select size="mini" v-model="formModel.feedbackUnit" placeholder="选择反馈单位">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">工作措施</strong>
          <div class="value">
            <el-form-item  prop="action" >
              <el-select size="mini" v-model="formModel.action" placeholder="选择工作措施">
                <el-option v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">是否签收</strong>
          <div class="value">
            <el-form-item class="radios" prop="isReceive" >
              <el-radio-group v-model="formModel.isReceive" >
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">已签收</el-radio>
                <el-radio :label="2">未签收</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter">
          <strong class="label">是否反馈</strong>
          <div class="value" >
            <el-form-item class="radios"  prop="isFeedback" >
              <el-radio-group v-model="formModel.isFeedback" >
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">已反馈</el-radio>
                <el-radio :label="2">未反馈</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <div class="table-item half">
          <strong class="label">比中方式</strong>
          <div class="value">
            <el-form-item class="radios"  prop="compareMode" >
              <el-radio-group v-model="formModel.compareMode" >
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">人到案</el-radio>
                <el-radio :label="2">案到人</el-radio>
                <el-radio :label="3">案到案</el-radio>
                <el-radio :label="4">人到人</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <div class="table-item quarter" >
          <strong class="label">checkbox测试</strong>
          <div class="value">
            <el-form-item >
              <el-checkbox-group v-model="formModel.test"  size="mini">
                <el-checkbox-button v-for="city in cities" :label="city"  :key="city">{{city}}</el-checkbox-button>
              </el-checkbox-group>
            </el-form-item> 
          </div>
        </div>    
      </div>
    </el-form>
    <div class="conclude">
      <div class="info">
        本单位有<strong>【未签收】</strong>比中信息：<em>143124</em>条，<strong>【未反馈】</strong>比中信息：<em>4312</em>条，<strong>【待查】</strong>需再次反馈的比中信息：<em>3414</em>条
      </div>
      <div class="btns">
        <el-button size="mini" >清空</el-button>
        <el-button size="mini" @click="test">查询</el-button>
      </div>
      
    </div>
  </div>
  <div class="list-wrap"></div>
</div>
</template>

<style lang="scss" scoped>
@import "../../../../src/style/_vars.scss";
.dna-compare{
  height: 100%;
  display: flex;
  flex-flow: column;
  .form-wrap{
    flex: 0 0 auto;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 2px 0px $--border-color-base;
    border: 1px solid $--border-color-base;
    .el-form.key-value-infos-table{
      padding-bottom: 0;
    }
    .conclude{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      padding: 10px 80px;
      border-radius: 5px;
      border: 1px solid $--color-primary;
      .info{
        flex: 1;
        strong,em{
          color: red;
        }
      }
      .btns{
        flex: 0 0 auto;
        text-align: right;
      }
    }
  }
  .list-wrap{
    flex: 1;
    border: 1px solid red;
  }
}
</style>

<script>

export default {
  name: 'dnaCompare',
  components: {
  },
  props: {
  },
  data() {
    return {
      formModel: {
        caseId: '', // 案件id
        personId: '', // 身份证id
        sampleId: '', // 样本id
        compareUnit: '', // 比中单位
        compareTime: '', // 比中时间
        compareType: '', // 比中类型
        feedback: '', // 反馈结果
        receiveUnit: '', // 签收单位
        feedbackUnit: '', // 反馈单位
        action: '', // 工作措施
        isReceive: 0, // 是否签收
        isFeedback: 0, // 是否反馈
        compareMode: 0, // 比中方式
        test: []

      },
      rules: {
        caseId: [{required: true, message: '请输入正确信息', trigger: 'blur'}],
        personId: [{required: true, message: '请输入正确信息', trigger: 'blur'}]
      },
      options: [
        {value: 'a', label: '选项1'},
        {value: 'b', label: '选项2'},
        {value: 'c', label: '选项3'}
      ],
      cities: ['上海', '北京', '广州', '深圳']
    }
  },
  watch: {
    
  },
  methods: {
    test() {
      console.log('formModel', this.formModel)
    }
  },
  mounted() {
  }
}
</script>

